<template>
  <div>
    <!-- /.login-logo -->
    <div id="login-body">
      <p class="login-box-msg">请登录</p>
      <form @submit.prevent="validate">
        <div class="form-group has-feedback">
          <input type="text" v-model="username" class="form-control" required placeholder="账号">
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" v-model="password" required placeholder="密码">
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="checkbox icheck">
              <button type="submit" id="btn">登录</button>
            </div>
          </div>
          <!-- /.col -->
        </div>
      </form>
    </div>
    <!-- /.login-box-body -->
  </div>
</template>

<script>
export default {
  name: "UserLogin",
  data() {
    return {
      username: "",
      password: ""
    }
  },
  methods: {
    validate() {
      this.axiosJSON.post("/user/login", {
        username: this.username,
        password: this.password,
      }).then(result => {
        if (result.data.code === 0) {
          this.$store.dispatch("setLoginUser", result.data.data); //通过Vuex状态存储登录的用户信息
          this.UserLoginStatus = "Y";
          this.$router.push("/home");
        } else {
          this.$message.error(result.data.msg);
          this.username = "";
          this.password = "";
        }
      });
    }
  }
}
</script>

<style>
#btn {
  vertical-align: top;
  background: linear-gradient(135deg, #5efce8, #736efe, #5efce8);
  background-size: 400%;
  border: none;
  height: 38px;
  width: 95px;
  color: white;
  font-size: 16px;
  border-radius: 10px;
  transition: .5s;
  cursor: pointer;
  margin-left: 160px;
}

#btn:hover {
  background-position: right;
}

#code {
  width: 60%;
}

#img {
  position: absolute;
  left: 250px;
  width: 150px;
  top: 152px;
}

#login-body {
  position: absolute;
  left: 650px;
  width: 400px;
}
</style>
